<template>
  <div class="app-container">
    <part-comp title="活动基本信息设置" />
    <div class="whitebg boxradius m_20 mt_20" v-loading='loading'>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-position="top">
            <el-form-item label="活动名称：" prop="title">
                <el-input v-model="ruleForm.title" placeholder="活动名称" ></el-input>
            </el-form-item>
            <el-form-item label="每单金额：" prop="coin">
                <el-input v-model="ruleForm.coin" placeholder="每单金额" style="width:440px"></el-input>（元）
            </el-form-item>
            <el-form-item label="活动规则：" prop="text">
                <editor  v-model="ruleForm.text" :min-height="200"/>
                <!-- <el-input v-model="ruleForm.text" type="textarea" rows="6" placeholder="活动规则"></el-input> -->
            </el-form-item>
        </el-form>
        <el-button type="primary" class="mt_100 mb_50 savebtn" :loading='saveloading' @click="save">保  存</el-button>
    </div>
  </div>
</template>

<script>
import PartComp from '@/components/PartComp';
import { getRule,setRule } from '@/api/rule';
export default {
    components:{
        PartComp
    },
    data(){
        let validCoin=(rule, value,callback)=>{
            if (!value){
                callback(new Error('请输入金额'))
            }else  if (/[^0-9.]/g.test(value)){
                callback(new Error('只允许输入正整数或者小数'))
            }else {
                callback()
            }
        }
        return {
            ruleForm:{
                title:'',
                coin:'',
                text:'',
            },
            rules:{
                title:{ required: true, message: '请输入标题', trigger: 'blur' },
                text:{ required: true, message: '请输入规则', trigger: 'blur' },
                coin:{ required: true, validator:validCoin, trigger: 'blur' },
                // coin:{ required: true, message: '请输入金额', trigger: 'blur' },
            },
            loading:false,
            saveloading:false
        }
    },

    created(){
        this.getData();
    },

    methods:{

        decodeHTM(html){
            var txt =document.createElement('textarea');
            txt.innerHTML = html;
            return txt.value;
        },

        getData(){
            this.loading=true;
           getRule().then(res=>{
                if(res.data){
                    let data = res.data;
                    this.ruleForm.title = data.title;
                    this.ruleForm.coin = data.coin;
                    this.ruleForm.text = this.decodeHTM(data.text);
                }
                this.loading=false;
           })     
        },

        save(){
            this.$refs.ruleForm.validate(valid=>{
                if(!valid) return;
                this.saveloading = true;
                // let params = {...this.ruleForm};
                // params.time = Number(this.ruleForm.time)*60;
                setRule(this.ruleForm).then(res=>{
                    if(res.code == 1){
                        this.$message.success('设置成功');
                    }
                    this.getData();
                    this.saveloading = false;
                }).catch(e=>{
                    this.getData();
                    this.saveloading = false;
                })
            })
            
        }
    }
}
</script>

<style lang="scss" scoped>
.home_header{
    color: #000;
    font-size: 15px;
    font-weight: bold;
    margin: 15px 0;
}
.boxradius{
    border-radius: 6px;
    padding: 20px;
}
.lablefont{
    font-weight: 700;
    margin-bottom: 15px;
}
.line{
    margin: 0 15px;
    height: 36px;
    line-height: 36px;
}
.savebtn{
    width: 100px;
}
</style>